<template>
  <div class="heart">
    <el-breadcrumb separator="">
      <el-breadcrumb-item :to="{ path: '/dataReport' }">线上报告</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a></a></el-breadcrumb-item
    >
    </el-breadcrumb>
    <div class="search">
      <el-button type="primary" style="width: 80px;" @click="()=>dialog = true">提交报告</el-button>
      <el-dialog v-model="dialog" title="提交报告" width="800" destroy-on-close>
        <div class="add">
          <div class="addItem">
            <span>企业名称：</span><el-select v-model="repcomName" style="width: 60%">
              <el-option
                  v-for="item in comData"
                  :key="item.comName"
                  :label="item.comName"
                  :value="item.comName"
                />
            </el-select>
          </div>
          <div class="addItem">
            <span>起止时间：</span><el-date-picker
            v-model="timeRange1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleChange"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 300px !important;"
          />
          </div>
          <div class="addItem">
            <span>报告类型</span>
            <el-select
            v-model="reportType1"
            placeholder="选择报告类型"
            size="large"
            style="width: 60%"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
        </el-select>
          </div>
          <div class="addItem">
            <span>报告图片：</span>
            <el-upload
              class="avatar-uploader"
              action="http://up-z2.qiniup.com"
              :show-file-list="false"
              :data="qndata"
              :on-success="handleSuccess"
            >
              <img v-if="repImg" :src="repImg" class="avatar" />
              <el-icon  class="avatar-uploader-icon" v-if="!repImg"><Plus /></el-icon>
            </el-upload>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialog = false">取消</el-button>
            <el-button type="primary" @click="addReport">
              添加
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="dialog1" title="审核报告" width="800" destroy-on-close>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="weitongguo">不通过</el-button>
            <el-button type="primary" @click="tongguo">
              通过
            </el-button>
          </div>
        </template>
      </el-dialog>
      <div>
          <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="handleChange"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
      <el-select
          v-model="reportType"
          placeholder="选择报告类型"
          size="large"
          style="width: 150px"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
      </el-select>
      <el-select
          v-model="repStatus"
          placeholder="选择审核结果"
          size="large"
          style="width: 150px"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
      </el-select>
      <el-select
          v-model="comName"
          placeholder="选择排污企业"
          size="large"
          style="width: 150px"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
      </el-select>
      <el-button type="primary" style="width: 80px;" @click="search">查询</el-button>
    </div>
    <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; margin-top: 20px"
    @sort-change="handleSort"
  >
  <el-table-column type="expand">
    <template #default="props">
      <h1 style="text-align: center">{{props.row.companyName}}</h1>
      <div class="row">
        <div class="col">
          企业名称：{{props.row.repComName}}
        </div>
        <div class="col">
          提交人：{{props.row.repSubUser}}
        </div>
      </div>
      <div class="row">
        <div class="col">
          报告类型：{{types[props.row.repType]}}
        </div>
        <div class="col">
          提交时间：{{props.row.createTime.replace('T',' ')}}
        </div>
      </div>
      <div class="row">
        <div class="col">
          报告开始时间：{{props.row.repStartTime.substring(0,10)}}
        </div>
        <div class="col">
          审核人：{{props.row.repAuditUser}}
        </div>
      </div>
      <div class="row">
        <div class="col">
          报告结束时间：{{props.row.repEndTime.substring(0,10)}}
        </div>
        <div class="col">
          审核状态：{{status[props.row.repStatus]}}
        </div>
      </div>
      <div style="text-align: center;">
        图片：<img :src="props.row.repImgUrl" alt="" style="width: 200px;height: 200px; margin: 0 auto; vertical-align:middle" >
      </div>
    </template>
    
  </el-table-column>
  <el-table-column prop="repComName" label="企业名称"></el-table-column>
  <el-table-column prop="repType" label="报告类型" >
    <template #default="scope">
      {{ types[scope.row.repType] }}
    </template>
  </el-table-column>
  <el-table-column prop="repStartTime" label="报告开始时间">
    <template #default="scope">
      {{ scope.row.repStartTime.substring(0,10) }}
    </template>
  </el-table-column>
  <el-table-column prop="repEndTime" label="报告结束时间">
    <template #default="scope">
      {{ scope.row.repEndTime.substring(0,10) }}
    </template>
  </el-table-column>
  <el-table-column prop="repSubUser" label="提交人" />
  <el-table-column prop="createTime" label="提交时间">
    <template #default="scope">
      {{ scope.row.createTime.substring(0,10) }}
    </template>
  </el-table-column>
  <el-table-column prop="repAuditUser" label="审核人" />
  <el-table-column label="审核状态" width="100">
    <template #default="scope">
      {{ status[scope.row.repStatus] }}
    </template>
  </el-table-column>
  <el-table-column label="操作" width="200">
    <template #default="scope">
      <el-button  @click="handleEdit(scope.$index, scope.row)"  size="small"
        >删除</el-button
      >
      <el-button  @click="handleEdit(scope.$index, scope.row)"  size="small"
        >编辑</el-button 
      >
      <el-button
        @click="() => dialog1 = true"
        size="small"
        >审核</el-button
      >
    </template>
  </el-table-column>
  </el-table>
  <div class="pagination">
    <Pagination v-model:page="page"  :total="total" @pagination="getData" />
  </div>
  </div>
    
</template>
<script lang="ts" setup>
import { time } from 'echarts';
import { ref, watch, onMounted, reactive,  } from 'vue'
import Pagination from '../components/Pagination.vue'
import http from '../http/http'
import { ElMessage } from 'element-plus'
import { useStore } from "vuex"
import type { UploadProps, UploadUserFile } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  let timeRange =  ref('')
  let reportType = ref()
  let repStatus = ref()
  let comName  = ref()
  let currentPage = ref(1)
  let pageSize = ref(10)
  let total = ref()
  let page = ref(1)
  let start = ref()
  let end = ref()
  let tableData = ref()
  let dialog = ref(false)
  let repcomName = ref()
  let comData = ref()
  let timeRange1 = ref()
  let reportType1 = ref()
  let dialog1 = ref(false)
  http.get('/api/company/list').then((res)=>{
        // console.log(res)
        if(res.data.code<300){
          comData.value = res.data.records
        }
    })
  let getData = (page:any,size:any,comName:any,startTime:any,endTime:any,repType:any,repStatus:any)=>{
      http.get('/api/report/page',{params:{
        page,
        size,
        startTime,
        endTime,
        repType,
        repStatus,
        comName
      }}).then((res)=>{
          console.log(222,res)
          if(res.data.code<300){
            tableData.value = res.data.records
            console.log(tableData.value)
            total.value = res.data.count - 0
          }else{
            ElMessage.error('查询数据失败！')
          }
      },(err)=>{
        console.log(err)
      })
  }
  let search = ()=>{
    getData(page.value,pageSize.value,comName.value,start.value,end.value,reportType.value,repStatus.value)
  }
  search()
  const types = ['标定校对','停产','纸质报告上传','其他']
  const status = ['审核中','未通过','已通过']
  const options = [
{
  value: 0,
  label: '标定校对',
},
{
  value: 1,
  label: '停产',
},
{
  value: 2,
  label: '纸质报告上传',
},
{
  value: 3,
  label: '其他',
},
]
const options1 = [
{
  value: 1,
  label: '审核中',
},
{
  value: 2,
  label: '已通过',
},
{
  value: 3,
  label: '未通过',
},
]
const options2 = [
{
  value: 1,
  label: '武汉大学',
},
{
  value: 2,
  label: '华中师范',
},
{
  value: 3,
  label: '武汉理工',
},
]
  onMounted(()=>{
    console.log(tableData.value)
  })
  interface Instrument {
    id: number,
    companyName: string,
    outputName: string,
    instrumentName: string,
    instrumentMIN: string,
    password: string,
    isUsing: boolean
  }
  let selected = ref<number[]>([])
  const handleSelectionChange = (a:Instrument[])=>{
    selected.value = [];
    a.forEach((row:Instrument)=>{
      selected.value.push(row.id)
    })
    console.log(selected.value)
  }

  let handleSort = (data: {column: any, prop: string, order: any })=>{
    console.log(data)
  }
  
  let handleChange = (a:any)=>{
    // console.log(111,timeRange.value)
    start.value = timeRange.value[0]
    end.value = timeRange.value[1]
  }
  let qndata = ref({
  token:''
  })
  let getToken = ()=>{
  http.get('/api/upload/token').then((res)=>{
      // console.log(res);
      qndata.value = {
        token: res.data.qiniuToken
      }
  },(err)=>{
    console.log(err)
  })
  }
  getToken()
  let repImg = ref()
  let handleSuccess = (res:any,file:any)=>{
    console.log(res,file)
    repImg.value = 'http://scp78067d.hn-bkt.clouddn.com/' + res.key
  }
  let addReport = ()=>{
    http.post('/api/report/insert',{
        repComName: repcomName.value,
        repType: reportType1.value,
        repStartTime: timeRange1.value[0],
        repEndTime: timeRange1.value[1],
        repImgUrl: repImg.value
      }).then((res)=>{
        if(res.data.code<300){
          ElMessage.success('添加成功')
          dialog.value = false
          search()
        }else{
          
          ElMessage.error(res.data.msg)
          dialog.value = false
        }
      })
  }
  let tongguo = ()=>{
    http.post('/api/report/update',{
      repId: 3,
      repStatus: 2,
      repAuditUser: '2910874384@qq.com'
    }).then((res)=>{
      dialog1.value = false
      if(res.data.code<300){
        ElMessage.success('操作成功')
        search()
      }else{
        ElMessage.error(res.data.msg)
      }
    })
  }
  let weitongguo = ()=>{
    http.post('/api/report/update',{
      repId: 3,
      repStatus: 1,
      repAuditUser: '2910874384@qq.com'
    }).then((res)=>{
      dialog1.value = false
      if(res.data.code<300){
        ElMessage.success('操作成功')
        search()
      }else{
        ElMessage.error(res.data.msg)
      }
    })
  }
</script>
<style>
  .heart{
    width: 95%;
    margin: 20px auto;
  }
  .search{
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
  }
  .pagination{
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  .row{
    width: 50%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
  }
  .col{
    width: 35%;
    margin-left: 15%;
  }
  .addItem{
    width: 70%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .avatar{
    width: 100px;
    height: 100px;
    
  }
</style>